<template>
  <div class="explore-card">
    <div class="explore-info" @click="goUserPage(commentInfo.user.id)">
      <div class="user-avatar">
        <el-avatar  v-if="exploreInfo.avatar"
                    :src="exploreInfo.avatar"></el-avatar>
        <el-avatar v-else class="user-avatar" :size="40" icon="el-icon-user-solid"></el-avatar>
      </div>
      <div class="info">
        <div class="user-name">{{exploreInfo.nickname}}</div>
        <div class="explore-time">{{exploreInfo.time | moment("YYYY-MM-DD h:mm:ss")}}</div>
      </div>
    </div>
    <div class="explore-content">{{exploreInfo.content}}</div>
  </div>
</template>

<script>
export default {
  name: 'ExploreCard',
  props: {
    exploreInfo: {
      default: () => {}
    }
  }
}
</script>

<style scoped>
  .explore-card{
    display: flex;
    flex-direction: column;
  }
  .explore-time {
    font-size: 0.8em;
  }
  .explore-content {
    margin-top: 0.4em;
    margin-left: 2em;
  }
  .explore-info {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .info{
    margin-left: 1rem;
  }
  .explore-info:hover {
    color: #00a1d6;
    cursor: pointer;
  }
</style>
